<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>About Blockly Games</title>
    <link rel="stylesheet" href="common/common.css">
    <style>
  body {
    margin: 0;
    padding: 1em 10%;
  }
  td {
    padding: 0 1em;
  }
    </style>
  </head>
  <body>
    <h1><a class="htmlLink" href="./" data-href="index.html">Blockly Games</a> : About</h1>

    <p>Blockly Games is a series of educational games that teach programming. It is
    designed for children who have not had prior experience with computer programming.
    By the end of these games, one is ready to use conventional text-based languages.</p>

    <table>
      <tr>
        <td>
          <img src="index/puzzle.png" height=100 width=100>
        </td>
        <td>
    <p>Puzzle is a quick introduction to Blockly's shapes and how the pieces snap together.</p>
        </td>
      </tr>

      <tr>
        <td>
          <img src="index/maze.png" height=100 width=100>
        </td>
        <td>
    <p>Maze is an introduction to loops and conditionals. It starts simply,
    but every level is more challenging than the last.</p>
        </td>
      </tr>

      <tr>
        <td>
          <img src="index/bird.png" height=100 width=100>
        </td>
        <td>
    <p>Bird is a deep-dive into conditionals. Control-flow is explored with
    increasingly complex conditions.</p>
        </td>
      </tr>

      <tr>
        <td>
          <img src="index/turtle.png" height=100 width=100>
        </td>
        <td>
    <p>Turtle is a deep-dive into loops. Use nested loops to paint a picture.</p>
        </td>
      </tr>

      <tr>
        <td>
          <img src="index/movie.png" height=100 width=100>
        </td>
        <td>
    <p>Movie is an introduction to mathematical equations. Use math to animate a movie.</p>
        </td>
      </tr>

      <tr>
        <td>
          <img src="index/music.png" height=100 width=100>
        </td>
        <td>
    <p>Music is an introduction to functions. Use functions to compose music.</p>
        </td>
      </tr>

      <tr>
        <td>
          <img src="index/pond-tutor.png" height=100 width=100>
        </td>
        <td>
    <p>Pond Tutor introduces text-based programming. Levels switch back and forth
    between blocks and actual JavaScript in a text editor.</p>
        </td>
      </tr>

      <tr>
        <td>
          <img src="index/pond-duck.png" height=100 width=100>
        </td>
        <td>
    <p>Pond is an open-ended contest to program the smartest duck.
    Use either blocks or JavaScript.</p>
        </td>
      </tr>
    </table>

    <p>Blockly Games encourages the development of tomorrow's programmers.
    Designed to be self-paced, Blockly Games can be
    <a href="https://github.com/NeilFraser/blockly-games/wiki/Offline">downloaded for offline&nbsp;use</a>,
    ensuring accessibility for all students and technology.  All code is open
    source, meaning it is free and customizable to meet your needs.  See the
    <a href="https://github.com/NeilFraser/blockly-games/wiki">developer's&nbsp;website</a>
    for more information. Developers, teachers and parents are welcome to
    <a href="https://groups.google.com/forum/#!forum/blockly-games">give&nbsp;feedback</a>
    as we continue to grow.</p>

    <script src="common/relink.js"></script>
  </body>
</html>
